<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/common.css">
</head>
<style>
    #con {
        width: 750px;
        height: 300px;
        overflow: hidden;
        margin: 20px auto;
        position: relative;
    }

    img {
        width: 750px;
        height: 300px;
    }

    .dian {
        height: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 10px;
    }

    .dian li {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: rgba(11, 12, 125, 0.5);
        margin: 0 10px;
    }

    .dian li.active {
        background-color: crimson;
    /* 注意 在li中添加选择器没有空格 */
    }

    .arrow {
        width: 50px;
        height: 50px;
        background-color: crimson;
        position: absolute;
        top: 100px;
        font-size: 20px;
        color: #eeeeee;
        line-height: 50px;
        text-align: center;

    }

    .left {
        left: 10px;
    }

    .right {
        right: 10px;

    }
</style>
<body>
<div id="app">
    <div id="con">
        <div class="arrow left" @click="left">《</div>
        <div class="arrow right" @click="right">》</div>
        <img v-for="(item,i) in imglist" v-show="i===active" :src="item" alt="图片">
        <ul class="dian">
<!--            <li @class="{active:i===active}" v-for="(item,i) in imglist" @click="active=i"></li>-->
            <li v-for="(item,i) in imglist" @click="goto(i)" :class="{active:i===active}"></li>

        </ul>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                // 定义定时器
                time:-1,
                // 当前选中的索引
                active: 0,
                imglist: [
                    "http://p1.music.126.net/QYNi1MWZu98KhYGC3fgE-A==/109951166129589746.jpg?imageView&quality=89",
                    "http://p1.music.126.net/X9oObuw2u0HAimURm91HDg==/109951166124747408.jpg?imageView&quality=89",
                    "http://p1.music.126.net/ZrX2nooipBoKOJeRxWtT6w==/109951166127135470.jpg?imageView&quality=89",
                    "http://p1.music.126.net/ZyjpV-MToefd1HKpBxcRtA==/109951166127170984.jpg?imageView&quality=89",
                    "http://p1.music.126.net/UmWr_EMHWCmPHWVuGk2QeA==/109951166127166143.jpg?imageView&quality=89",
                ]
            }
        },
        mounted() {
            // clearInterval(this.timer)
            // 调用定时器滚动方法
            this.run()
        },
        methods:{
            // 定时器滚动方法
            run(){
                 this.time = setInterval(() => {
                    // this.active++;
                    if (++this.active === this.imglist.length) {
                        this.active = 0;
                    }
                }, 3000);

            },
            left(){
                // 先清除定时器
                clearInterval(this.time)
                if(--this.active<0)this.active=this.imglist.length-1
                // 等执行完再调用 定时器 以免定时器的累加
                this.run()
            },
            right(){
                // 先清除定时器
                clearInterval(this.time)
                if(++this.active===this.imglist.length)this.active=0
                // 等执行完再调用 定时器 以免定时器的累加
                this.run()
            },
            goto(i){
                // 先清除定时器
                clearInterval(this.time)
                this.active=i
                // 等执行完再调用 定时器 以免定时器的累加
                this.run()
            }
        }
    })

</script>
</body>
</html>
